<template>
  <n-card :bordered="false" class="proCard">
    <div>
      <QueryForm
        :init-query="initQuery"
        v-model:value="queryForm"
        :more-btn="false"
        @submit="reloadTable"
      >
        <template #default="{ queryForm }">
          <QueryItem
            :query-form="queryForm"
            :options-map="optionsMap"
            :table-columns="queryItems.default"
          ></QueryItem>
        </template>
      </QueryForm>
    </div>
    <BasicTable
      :columns="tableColumns"
      :request="loadDataTable"
      :row-key="(row) => row.id"
      ref="tableRef"
      @update:checked-row-keys="onCheckedRowEvent"
      :scroll-x="1090"
    >
      <template #tableTitle>
        <n-space>
          <n-button
            v-authd="AuthCodes['角色管理新增']"
            type="primary"
            :disabled="!vCtl.addBtn"
            @click="doSaveModal()"
          >
            新建
          </n-button>
          <!-- <n-button  v-authd="AuthCodes['角色管理编辑']" type="warning" @click="doUpdateModal()">
            编辑
          </n-button> -->
          <n-button
            v-authd="AuthCodes['角色管理删除']"
            type="error"
            :disabled="!vCtl.delBtn"
            @click="doDeleteModal()"
          >
            删除
          </n-button>
        </n-space>
      </template>
      <template #toolbar> </template>
    </BasicTable>
  </n-card>
</template>

<script lang="ts">
  import { defineComponent, ref, watch, computed } from 'vue';
  import { BasicTable, QueryForm, QueryItem } from 'slash-admin';
  import httpApi from './httpApi';
  import {
    checkedRows,
    doDeleteModal,
    doSaveModal,
    doUpdateModal,
    enabledOptions,
    onCheckedRowEvent,
    vCtl,
    queryForm,
    tableColumns,
    tableRef,
    reloadTable,
    initQuery,
  } from './Service';
  import { AuthCodes } from '@/apis/auth-code';
  import { getOptionsMap } from './options';

  export default defineComponent({
    components: { BasicTable, QueryForm, QueryItem },
    props: {
      queryFormValue: {
        type: [Object],
        default: () => {
          return {};
        },
      },
    },
    setup(props) {
      queryForm.value = Object.assign(queryForm.value, props.queryFormValue);
      const optionsMap = getOptionsMap();
      const queryItems = computed(() => {
        const result: { default: MyTableBasicColumn[]; more: MyTableBasicColumn[] } = {
          default: [],
          more: [],
        };
        tableColumns.forEach((item) => {
          if (item.searchProps) {
            if (item.searchProps.more) {
              result.more.push(item);
            } else {
              result.default.push(item);
            }
          }
        });

        return result;
      });
      const loadDataTable = async (res) => {
        console.log('表单参数:{}', queryForm.value);
        checkedRows.value = [];
        return await httpApi.selectPageList({
          searchKey: null,
          ...res,
          ...queryForm.value,
        });
      };
      watch(props.queryFormValue, () => {
        queryForm.value = Object.assign(queryForm.value, props.queryFormValue);
        console.log('更新完成');
      });

      return {
        loadDataTable,
        reloadTable,
        tableColumns,
        onCheckedRowEvent,
        enabledOptions,
        queryForm,
        tableRef,
        doSaveModal,
        vCtl,
        doUpdateModal,
        doDeleteModal,
        AuthCodes,
        initQuery,
        optionsMap,
        queryItems,
      };
    },
  });
</script>

<style lang="less" scoped></style>
